<template>
	<div class="home_view">
		<div class="projectTitle">欢迎使用 {{projectName}}</div>
		<div class="notice_list">
			<el-card class="notice_card">
				<template #header>
					<div class="notice_header">
						<div class="notice_title">公告栏</div>
					</div>
				</template>
				<div class="notice_content">
					<el-timeline>
						<el-timeline-item
							v-for="(item, index) in noticeList"
							:key="index"
							:timestamp="item.fabushijian"
							placement="top">
							<el-card class="notice_item">
								<h4 class="notice_item_title" @click="viewNotice(item)">{{item.title}}</h4>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</el-card>
		</div>
		<!-- 公告详情对话框 -->
		<el-dialog
			v-model="noticeDialogVisible"
			title="公告详情"
			width="50%"
			destroy-on-close>
			<div class="notice_detail">
				<h3 class="notice_detail_title">{{currentNotice.title}}</h3>
				<div class="notice_detail_time">发布时间：{{currentNotice.fabushijian}}</div>
				<div class="notice_detail_content">{{currentNotice.content}}</div>
			</div>
		</el-dialog>
		<div class="count_list">
			<el-collapse-transition v-if="btnAuth('qingjiashenqing','首页总数')">
				<el-card v-show="countTypeList.closeqingjiashenqingCountType" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								请假申请
							</div>
							<div class="card_head_right">
								<el-icon @click="countTypeClick('hiddenqingjiashenqingCountType')" class="showIcons"
									:class="countTypeList.hiddenqingjiashenqingCountType?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="countTypeClick('closeqingjiashenqingCountType')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
							
						</div>
					</template>
					<el-collapse-transition>
						<div class="count_item" v-show="countTypeList.hiddenqingjiashenqingCountType">
							<div class="count_title">请假申请总数</div>
							<div class="count_num">{{qingjiashenqingCount}}</div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
			<el-collapse-transition v-if="btnAuth('qingjiashenpi','首页总数')">
				<el-card v-show="countTypeList.closeqingjiashenpiCountType" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								请假审批
							</div>
							<div class="card_head_right">
								<el-icon @click="countTypeClick('hiddenqingjiashenpiCountType')" class="showIcons"
									:class="countTypeList.hiddenqingjiashenpiCountType?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="countTypeClick('closeqingjiashenpiCountType')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
							
						</div>
					</template>
					<el-collapse-transition>
						<div class="count_item" v-show="countTypeList.hiddenqingjiashenpiCountType">
							<div class="count_title">请假审批总数</div>
							<div class="count_num">{{qingjiashenpiCount}}</div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
		</div>
		<div class="card_list">
			<el-collapse-transition v-if="btnAuth('qingjiashenqing','首页统计')">
				<el-card v-show="cardTypeList.closeqingjiashenqingChartType1" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								请假申请
							</div>
							<div class="card_head_right">
								<el-icon @click="cardTypeClick('hiddenqingjiashenqingChartType1')" class="showIcons"
									:class="cardTypeList.hiddenqingjiashenqingChartType1?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="cardTypeClick('closeqingjiashenqingChartType1')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
						</div>
					</template>
					<el-collapse-transition>
						<div class="card_item" v-show="cardTypeList.hiddenqingjiashenqingChartType1">
							<div id="qingjiashenqingqingjiatianshuEchart1" style="width: 100%;height: 400px;"></div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
			<el-collapse-transition v-if="btnAuth('qingjiashenpi','首页统计')">
				<el-card v-show="cardTypeList.closeqingjiashenpiChartType1" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								请假审批
							</div>
							<div class="card_head_right">
								<el-icon @click="cardTypeClick('hiddenqingjiashenpiChartType1')" class="showIcons"
									:class="cardTypeList.hiddenqingjiashenpiChartType1?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="cardTypeClick('closeqingjiashenpiChartType1')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
						</div>
					</template>
					<el-collapse-transition>
						<div class="card_item" v-show="cardTypeList.hiddenqingjiashenpiChartType1">
							<div id="qingjiashenpiqingjiariqiEchart1" style="width: 100%;height: 400px;"></div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
			<el-collapse-transition v-if="btnAuth('qingjiashenpi','首页统计')">
				<el-card v-show="cardTypeList.closeqingjiashenpiChartType1" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								请假审批
							</div>
							<div class="card_head_right">
								<el-icon @click="cardTypeClick('hiddenqingjiashenpiChartType1')" class="showIcons"
									:class="cardTypeList.hiddenqingjiashenpiChartType1?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="cardTypeClick('closeqingjiashenpiChartType1')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
						</div>
					</template>
					<el-collapse-transition>
						<div class="card_item" v-show="cardTypeList.hiddenqingjiashenpiChartType1">
							<div id="qingjiashenpikechengmingchengEchart1" style="width: 100%;height: 400px;"></div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
		</div>
	</div>
</template>

<script setup>
	import {
		inject,
		nextTick,
		ref,
		getCurrentInstance
	} from 'vue';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const projectName = context.$project.projectName
	const countTypeList = ref({
	})
	const getCountList=()=>{
		countTypeList.value.closeqingjiashenqingCountType = true
		countTypeList.value.hiddenqingjiashenqingCountType = true
		if(btnAuth('qingjiashenqing','首页总数')){
			getqingjiashenqingCount()
		}
		countTypeList.value.closeqingjiashenpiCountType = true
		countTypeList.value.hiddenqingjiashenpiCountType = true
		if(btnAuth('qingjiashenpi','首页总数')){
			getqingjiashenpiCount()
		}
	}
	const qingjiashenqingCount = ref(0)
	const getqingjiashenqingCount = () => {
		context?.$http({
			url:'qingjiashenqing/count',
			method: 'get'
		}).then(res=>{
			qingjiashenqingCount.value = res.data.data
		})
	}
	const qingjiashenpiCount = ref(0)
	const getqingjiashenpiCount = () => {
		context?.$http({
			url:'qingjiashenpi/count',
			method: 'get'
		}).then(res=>{
			qingjiashenpiCount.value = res.data.data
		})
	}
	const countTypeClick = (e) => {
		countTypeList.value[e] = !countTypeList.value[e]
	}
	// 公告列表
	const noticeList = ref([])
	// 获取公告列表
	const getNoticeList = () => {
		context?.$http({
			url: 'gonggao/list',
			method: 'get',
			params: {
				page: 1,
				limit: 5
			}
		}).then(res => {
			if (res.data.code === 0) {
				noticeList.value = res.data.page.list
			}
		})
	}
	// 公告详情对话框
	const noticeDialogVisible = ref(false)
	const currentNotice = ref({})
	// 查看公告详情
	const viewNotice = (item) => {
		currentNotice.value = item
		noticeDialogVisible.value = true
	}
	const init=()=>{
		getCountList()
		getCardList()
		getNoticeList() // 获取公告列表
	}
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	let echarts = inject("echarts")
	const cardTypeClick = (e) =>{
		cardTypeList.value[e] = !cardTypeList.value[e]
		setTimeout(()=>{
			getCardList()
		},1000)
	}
	const cardTypeList = ref({
		closeqingjiashenqingChartType1: true,
		hiddenqingjiashenqingChartType1: true,
		closeqingjiashenpiChartType1: true,
		hiddenqingjiashenpiChartType1: true,
	})
	const getCardList = () => {
		if(btnAuth('qingjiashenqing','首页统计')){
			getqingjiashenqingChart1()
		}
		if(btnAuth('qingjiashenpi','首页统计')){
			getqingjiashenpiChart1()
		}
	}
	const getqingjiashenqingChart1 = () => {
		nextTick(()=>{
			var qingjiatianshuEchart1 = echarts.init(document.getElementById("qingjiashenqingqingjiatianshuEchart1"),'macarons');
			context?.$http({
				url: `qingjiashenqing/value/xuehao/qingjiatianshu`,
				method: "get",
			}).then(obj=>{
				let res = obj.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<res.length;i++){
				    xAxis.push(res[i].xuehao);
				    yAxis.push(parseFloat((res[i].total)));
				    pArray.push({
				        value: parseFloat((res[i].total)),
				        name: res[i].xuehao
				    })
				}
				var option = {};
				option = {
				    title: {
				        text: '学生请假统计',
				        left: 'center'
				    },
				    tooltip: {
				      trigger: 'item',
				      formatter: '{b} : {c}'
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: xAxis
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: yAxis,
				        type: 'line',
						areaStyle: {},
						smooth: true
                    }]
                };
				qingjiatianshuEchart1.clear()
				// 使用刚指定的配置项和数据显示图表。
				qingjiatianshuEchart1.setOption(option);
				//根据窗口的大小变动图表
				qingjiatianshuEchart1.resize();
			})
		})
	}
	const getqingjiashenpiChart1 = () => {
		nextTick(()=>{
			var kechengmingchengEchart1 = echarts.init(document.getElementById("qingjiashenpikechengmingchengEchart1"),'macarons');
			context?.$http({
				url: "qingjiashenpi/group/qingjiariqi",
				method: "get",
			}).then(obj=>{
				let res = obj.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<res.length;i++){
				    xAxis.push(res[i].kechengmingcheng);
				    yAxis.push(parseFloat((res[i].total)));
				    pArray.push({
				        value: parseFloat((res[i].total)),
				        name: res[i].kechengmingcheng
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '请假统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel: {
                            rotate: 40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
				kechengmingchengEchart1.clear()
				// 使用刚指定的配置项和数据显示图表。
				kechengmingchengEchart1.setOption(option);
				//根据窗口的大小变动图表
				kechengmingchengEchart1.resize();
			})
			var kechengmingchengEchart1 = echarts.init(document.getElementById("qingjiashenpikechengmingchengEchart1"),'macarons');
			context?.$http({
				url: "qingjiashenpi/group/kechengmingcheng",
				method: "get",
			}).then(obj=>{
				let res = obj.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<res.length;i++){
				    xAxis.push(res[i].kechengmingcheng);
				    yAxis.push(parseFloat((res[i].total)));
				    pArray.push({
				        value: parseFloat((res[i].total)),
				        name: res[i].kechengmingcheng
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '请假统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel: {
                            rotate: 40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
				kechengmingchengEchart1.clear()
				// 使用刚指定的配置项和数据显示图表。
				kechengmingchengEchart1.setOption(option);
				//根据窗口的大小变动图表
				kechengmingchengEchart1.resize();
			})
		})
	}
	init()
</script>
<style lang="scss">
	.projectTitle{
		padding: 0 0 20px;
		font-weight: bold;
		display: flex;
		width: 100%;
		font-size: 30px;
		justify-content: center;
		align-items: center;
		height: 50%;
	}

	.showIcons {
		transition: transform 0.3s;
		margin-right: 10px;
	}

	.showIcons1 {
		transform: rotate(-180deg);
	}
	
	// 总数盒子
	.count_list{
		padding: 0 0 20px;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		// 总数card
		.card_view {
			border: 1px solid #e4e7ed;
			box-shadow: 0px 0px 12px rgba(0,0,0,.12);
			padding: 0 0 50px;
			margin: 0 10px 10px;
			flex: 1;
			background: rgba(0,123,213,1);
			width: 100%;
			position: relative;
			box-sizing: border-box;
			height: auto;
			// card头部
			.el-card__header {
				border: 1px solid #e4e7ed;
				padding: 10px;
				left: 0;
				bottom: 0;
				width: 100%;
				border-width: 1px 0 0;
				position: absolute;
				// 头部盒子
				.index_card_head {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					// 标题
					.card_head_title {
						color: #fff;
						font-size: 18px;
					}
					// 按钮盒子
					.card_head_right {
						display: flex;
						align-items: center;
						// 按钮
						.el-icon {
							cursor: pointer;
							color: #fff;
							font-size: 20px;
						}
					}
				}
			}
			// body
			.el-card__body {
				padding: 0;
				// body盒子
				.count_item{
					padding: 30px;
					display: flex;
					align-items: center;
					text-align: center;
					// 总数标题
					.count_title{
						padding: 0 10px 0 0;
						color: #fff;
						font-weight: bold;
						font-size: 20px;
						line-height: 3;
					}
					// 总数数字
					.count_num{
						color: #fff;
						font-weight: bold;
						font-size: 24px;
						line-height: 3;
					}
				}
			}
		}
	}
	// 首页盒子
	.home_view {
		padding: 30px 0;
		background: url(http://clfile.zggen.cn/20240203/b89de8d5b5894c14925e21e6f1cbfff7.png) no-repeat center top / 100% 100% !important;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}
	// 统计图盒子
	.card_list {
		padding: 0 0 20px;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		// 统计图card
		.card_view {
			border: 0px solid #e4e7ed;
			box-shadow: none;
			margin: 0 10px 20px;
			background: #fff;
			width: 32%;
			box-sizing: border-box;
			height: auto;
			// 头部
			.el-card__header {
				border: 1px solid #e4e7ed;
				display: none;
				width: 100%;
				border-width: 0 0 1px;
				// 头部盒子
				.index_card_head {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					// 标题
					.card_head_title {
						color: #f00;
						font-size: 18px;
					}
					// 按钮盒子
					.card_head_right {
						display: flex;
						align-items: center;
						// 按钮
						.el-icon{
							cursor: pointer;
							color: #aaa;
							font-size: 20px;
						}
					}
				}
			}
			// body
			.el-card__body {
				padding: 0;
				width: 100%;
				// body盒子
				.card_item{
					padding: 30px;
					text-align: center;
				}
			}
		}
	}
	// 公告栏样式
	.notice_list {
		padding: 0 0 20px;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
		.notice_card {
			width: 80%;
			background: rgba(255, 255, 255, 0.9);
			.notice_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.notice_title {
					font-size: 18px;
					font-weight: bold;
					color: #333;
				}
			}
			.notice_content {
				padding: 20px;
				.notice_item {
					margin-bottom: 10px;
					.notice_item_title {
						margin: 0;
						cursor: pointer;
						color: #409EFF;
						&:hover {
							color: #66b1ff;
						}
					}
				}
			}
		}
	}
	// 公告详情样式
	.notice_detail {
		padding: 20px;
		.notice_detail_title {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			margin-bottom: 15px;
			text-align: center;
		}
		.notice_detail_time {
			font-size: 18px;
			color: #999;
			margin-bottom: 20px;
			text-align: center;
		}
		.notice_detail_content {
			font-size: 16px;
			color: #666;
			line-height: 1.8;
			white-space: pre-wrap;
		}
	}
</style>
